@import "normalize.css"
@import "./variables.styl"
[class^="el-icon-ali"], [class*="el-icon-ali"] {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


opacity(n)
  opacity n
  if support-for-ie
    filter unquote('progid:DXImageTransform.Microsoft.Alpha(Opacity=' + round(n * 100) + ')')

media()
  join(' and ', arguments)

responsiveSearchInput(p_index)
  #app
    .searchForm
      .el-input
        width $searchInputWidth[p_index]

      .el-input-number
        width $searchInputWidth[p_index]


html
body
  @extend .edenfont
  width 100%
  height 100%
  background-color bg-color
  overflow hidden

ul
  list-style none
  padding 0
  margin 0

a
a:hover
a:focus
  cursor pointer
  text-decoration none

.hidden
  display none !important


.el-card.is-always-shadow,
.el-card.is-hover-shadow:focus,
.el-card.is-hover-shadow:hover
  box-shadow 0 1px 6px rgba(0, 0, 0, .2) !important

.widget-card
  background white
  height 100%
  width 100%
  overflow hidden
  border-radius 4px
  transition box-shadow .4s

  &:hover
    box-shadow 0 1px 6px rgba(0, 0, 0, .2)

.deleteline
  .el-checkbox__label
    text-decoration line-through

.bg-purple
  background-color #d3dce6

.grid-content
  border-radius 4px
  height 36px
  line-height 36px
  padding-left 8px

#app
  height 100%
  min-width 1024px
  -webkit-font-smoothing antialiased
  // 地区选择器的样式

  .area-select.large {
    width 100%
  }

  .cascader-menu-list .cascader-menu-option.selected {
    background-color: #e4e8f1;
    color: #349CFB;
    font-weight: 700;
  }

  .area-select .area-selected-trigger {
    justify-content: flex-start;
    position: relative;
    display: flex;
    font-size: 14px;
    cursor: pointer;
    margin: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    height: 100%;
    padding: 8px 20px 7px 12px;
    align-items: center;
  }

.el-header
  height: 30px;
  padding-top: 20px;
  border-bottom: 1px solid #f8f8f8;

.el-footer
  background: white;
  height: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-top: 1px solid #f8f8f8;

.out_div {
  height 100%
}

.baseEdit
  width: 100%;
  background: white;
  height: 100%;
  padding: 20px;


.baseList
  background: white;
  padding: 20px;
  height: calc(100% -40px)

.searchForm
  // padding: 10px;
  // background: #F8F8F8;
  margin-bottom: 10px;

  .el-form-item
    margin-bottom 0

  .el-button--mini
    margin-top 2px

.editForm
  .el-button--mini
    margin-top 6px

  .el-input
    width 200px

  .el-input-number
    width 200px

.eden-card
  background eden-card-bg
  padding 20px
  box-sizing border-box
  @extend .widget-card

.print-box
  width 595px
  height 842px

  table
    border-top 1px solid #000000
    border-left 1px solid #000000
    border-collapse collapse
    border-spacing 0

    td
      border-right 1px solid #000000
      border-bottom 1px solid #000000
      border 0
      text-align center
      padding 2px 3px
      font-size 12px

//  sidebar

.sidebar-wrap
.el-submenu__icon-arrow
  color white

.el-submenu
  .el-menu-item
    background-color submenu-bg !important
    min-width: 0px !important

    &:hover
      background-color menu-hover !important

//  sidebar scroll

.sidebar-container
  height 100%
  z-index 1005

  .scrollbar-wrapper
    height 'calc(%s + %s)' % (100% 5px)

    .el-scrollbar__view
      height 100%

    .el-scrollbar__wrap
      overflow-x hidden

  .el-menu
    @extend .edenfont-content
    border none
    height 100%
    width 100% !important

  .el-menu--collapse
    .el-submenu__icon-arrow
      display none

    .el-submenu
      .el-submenu__title
        span
          width 0
          height 0
          overflow hidden
          visibility hidden
          display inline-block

responsiveSearchInput(0)
for $i in 0 1 2 3 4
  $media = media('screen', '(max-width: ' + $screen[$i] + ')')
  @media $media
    responsiveSearchInput($i)

.el-notification__content p
  text-align left

//  nprogress style
#nprogress
  .bar
    background main-color !important

  .peg
    box-shadow 0 0 10px main-color, 0 0 5px main-color !important

  .spinner-icon
    border-top-color main-color !important
    border-left-color main-color !important

//  scrollbar
::-webkit-scrollbar
  width 6px
  height 6px

::-webkit-scrollbar-track
  background 0 0

::-webkit-scrollbar-thumb
  background-color scrollbar-thumb-bg
  border-radius 5px

::-webkit-scrollbar-thumb:hover
  background-color scrollbar-thumb-hover-bg

::-webkit-scrollbar-corner
  background-color scrollbar-corner-bg

::-webkit-scrollbar-resizer
  background-color scrollbar-resizer-bg

body::-webkit-scrollbar
  width 8px

body::-webkit-scrollbar-thumb
  background-color body-scrollbar-thumb-bg

.el-input__inner::placeholder
.el-textarea__inner::placeholder
.el-date-editor .el-range-input::placeholder
  // color #ff0000

.el-input.is-disabled .el-input__inner
.el-textarea.is-disabled .el-textarea__inner
.el-checkbox__input.is-disabled + .el-checkbox__label
  color #1f2d3d
  background-color #fff

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.28s;
}

.fade-enter,
.fade-leave-active {
  opacity: 0;
}


.fade-transform-leave-active,
.fade-transform-enter-active {
  transition: all .5s;
}

.fade-transform-enter {
  opacity: 0;
  transform: translateX(-30px);
}

.fade-transform-leave-to {
  opacity: 0;
  transform: translateX(30px);
}

.input_remark {
  font-size: 12px;
  color: #909399;
}
